<template>
  <div class="panel-width">
    <div id="player"></div>
    <div class="panel-left">
      <div>
        <div class="form-input">
          <label>创建特效</label>
          <select v-model="creatActor" class="input-style">
            <option value="FlyLine">飞线图</option>
            <option value="Ripples">涟漪图</option>
          </select>
        <button class="submit" @click="submit">创建特效</button>
        </div>
        <div class="form-input">
          <label>删除特效</label>
          <select v-model="deleteActor" class="input-style">
            <option value="FlyLine">飞线图</option>
            <option value="Ripples">涟漪图</option>
          </select>
        <button class="submit" @click="deleteActorF">删除特效</button>
        </div>
      </div>
    </div>
    <div class="poi-box" ref="poiDom" v-if="showPoi">
      <img src="@/assets/img/qing.png" alt="" />
    </div>
  </div>
</template>

<script>
import { load, apiOnResponse, apiSend, emitUIInteraction } from '@/utils/app.js'
export default {
  name: 'Panel',
  data () {
    return {
      creatActor: '',
      deleteActor: '',
      showPoi: false
    }
  },
  mounted () {
    load()
    apiOnResponse('getUCS', this.solveUCS)
  },
  methods: {
    solveUCS (res) {
      let obj = JSON.parse(res)
      let x = obj.poi.split(' ')[0].replace('X=', '')
      let y = obj.poi.split(' ')[1].replace('Y=', '')
      this.setDom(x, y)
    },
    setDom (x, y) {
      this.showPoi = true
      let dom = this.$refs.poiDom
      setTimeout(() => {
        dom.style.left = (parseFloat(x) - dom.clientWidth / 2) + 'px'
        dom.style.top = (parseFloat(y) - dom.clientHeight / 2) + 'px'
      }, 100)
    },
    submit () {
      apiSend({
        creatActor: this.creatActor,
        params: JSON.stringify({
          color: `X=${parseInt(Math.random() * 255)} Y=${parseInt(Math.random() * 255)} Z=${parseInt(Math.random() * 255)}`,
          position: `X=${(Math.random() * 2000) - 1000} Y=${(Math.random() * 2000) - 1000} Z=0`
          // color: JSON.stringify({
          //   X: parseInt(Math.random() * 255),
          //   Y: parseInt(Math.random() * 255),
          //   Z: parseInt(Math.random() * 255)
          // }),
          // position: JSON.stringify({
          //   X: Math.random() * 100,
          //   Y: Math.random() * 100,
          //   Z: Math.random() * 100
          // })
        })
      })
    },
    deleteActorF () {
      apiSend({
        deleteActor: this.deleteActor,
      })
    }
  }
}
</script>

<style scoped lang="scss">
#player {
  width: 1920px;
  height: 1080px;
}
#streamingVideo {
  width: 1920px;
  height: 1080px;
}
.panel-width {
  position: relative;
  width: 1920px;
  height: 1080px;
}
.panel-left {
  position: fixed;
  left: 0;
  bottom: 20px;
  width: 100%;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  padding: 30px;
  display: flex;
  justify-content: center;
}
.submit {
  margin: 10px;
  border: 0;
  border-radius: 4px;
  color: white;
  width: 100px;
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  background-color: #7e4df7;
}
.poi-box {
  position: fixed;
}
</style>
